<template>
	<div>
		<div class="publicpageview" id="publicpageview">
			<div style="text-align: center;font-weight: bold;margin-top: 20px;">非住宅房屋情况调查表(二) </div>
			<!-- <div style="display:flex;margin-top: 10px;flex-flow: row wrap" v-if="topContet">
				<div style="margin-left: 30px;">产别{{topContet.field1}}</div>
				<div style="margin-left: 30px;">管片{{topContet.field2}}</div>
				<div style="margin-left: 30px;">所号{{topContet.field8}}</div>
				<div style="margin-left: 30px;">地址{{topContet.field3}}</div>
				<div style="margin-left: 30px;">查询日期{{topContet.field4}}</div>
				<div style="margin-left: 30px;">调租日期{{topContet.field5}}</div>
			</div> -->
			<div style="display: flex;margin-top: 20px;box-sizing: border-box;flex-flow: row wrap;">
				<div class="list4">所号</div>
				<div class="list2">
					<div class="list6">工业</div>
					<div style="display: flex;">
						<div class="list5">建筑面积</div>
						<div class="list5">租金定额</div>
					</div>
				</div>
				<div class="list2">
					<div class="list6">商业</div>
					<div style="display: flex;">
						<div class="list5">建筑面积</div>
						<div class="list5">租金定额</div>
					</div>
				</div>
				<div class="list2">
					<div class="list6">金融业</div>
					<div style="display: flex;">
						<div class="list5">建筑面积</div>
						<div class="list5">租金定额</div>
					</div>
				</div>
				<div class="list2">
					<div class="list6">卫生</div>
					<div style="display: flex;">
						<div class="list5">建筑面积</div>
						<div class="list5">租金定额</div>
					</div>
				</div>
				<div class="list2">
					<div class="list6">文化</div>
					<div style="display: flex;">
						<div class="list5">建筑面积</div>
						<div class="list5">租金定额</div>
					</div>
				</div>
				<div class="list2">
					<div class="list6">托幼</div>
					<div style="display: flex;">
						<div class="list5">建筑面积</div>
						<div class="list5">租金定额</div>
					</div>
				</div>
				<div class="list2">
					<div class="list6">行政事业</div>
					<div style="display: flex;">
						<div class="list5">建筑面积</div>
						<div class="list5">租金定额</div>
					</div>
				</div>
				<div class="list2">
					<div class="list6">旅馆</div>
					<div style="display: flex;">
						<div class="list5">建筑面积</div>
						<div class="list5">租金定额</div>
					</div>
				</div>
				<div class="list2">
					<div class="list6">服务</div>
					<div style="display: flex;">
						<div class="list5">建筑面积</div>
						<div class="list5">租金定额</div>
					</div>
				</div>
				<div class="list2">
					<div class="list6">仓库</div>
					<div style="display: flex;">
						<div class="list5">建筑面积</div>
						<div class="list5">租金定额</div>
					</div>
				</div>
				<div class="list2">
					<div class="list6">街道生产</div>
					<div style="display: flex;">
						<div class="list5">建筑面积</div>
						<div class="list5">租金定额</div>
					</div>
				</div>
				<div class="list2">
					<div class="list6">其他</div>
					<div style="display: flex;">
						<div class="list5">建筑面积</div>
						<div class="list5">租金定额</div>
					</div>
				</div>
				<div class="list2">
					<div class="list6">合计</div>
					<div style="display: flex;">
						<div class="list5">建筑面积</div>
						<div class="list5">租金定额</div>
					</div>
				</div>
			</div>
			<div style="display: flex;box-sizing: border-box;" v-for="(item,index) in list" :key="index">
				<div class="list8">{{item.blockNo}}</div>
				<div class="list3">{{item.gyBuildingArea}}</div>
				<div class="list3">{{item.gyRentPrice}}</div>
				<div class="list3">{{item.syBuildingArea}}</div>
				<div class="list3">{{item.syRentPrice}}</div>
				<div class="list3">{{item.jryBuildingArea}}</div>
				<div class="list3">{{item.jryRentPrice}}</div>
				<div class="list3">{{item.wsBuildingArea}}</div>
				<div class="list3">{{item.wsRentPrice}}</div>
				<div class="list3">{{item.whBuildingArea}}</div>
				<div class="list3">{{item.whRentPrice}}</div>
				<div class="list3">{{item.tyBuildingArea}}</div>
				<div class="list3">{{item.tyRentPrice}}</div>
				<div class="list3">{{item.xzsyBuildingArea}}</div>
				<div class="list3">{{item.xzsyRentPrice}}</div>
				<div class="list3">{{item.lgBuildingArea}}</div>
				<div class="list3">{{item.lgRentPrice}}</div>
				<div class="list3">{{item.fwBuildingArea}}</div>
				<div class="list3">{{item.fwRentPrice}}</div>
				<div class="list3">{{item.ckBuildingArea}}</div>
				<div class="list3">{{item.ckRentPrice}}</div>
				<div class="list3">{{item.jdscBuildingArea}}</div>
				<div class="list3">{{item.jdscRentPrice}}</div>
				<div class="list3">{{item.qtBuildingArea}}</div>
				<div class="list3">{{item.qtBuRentPrice}}</div>
				<div class="list3">{{item.allBuildingArea}}</div>
				<div class="list3">{{item.allBuRentPrice}}</div>
			</div>
			<div style="display: flex;box-sizing: border-box;">
				<div class="list8">合计</div>
				<div class="list3">{{hejiObject.gyBuildingArea}}</div>
				<div class="list3">{{hejiObject.gyRentPrice}}</div>
				<div class="list3">{{hejiObject.syBuildingArea}}</div>
				<div class="list3">{{hejiObject.syRentPrice}}</div>
				<div class="list3">{{hejiObject.jryBuildingArea}}</div>
				<div class="list3">{{hejiObject.jryRentPrice}}</div>
				<div class="list3">{{hejiObject.wsBuildingArea}}</div>
				<div class="list3">{{hejiObject.wsRentPrice}}</div>
				<div class="list3">{{hejiObject.whBuildingArea}}</div>
				<div class="list3">{{hejiObject.whRentPrice}}</div>
				<div class="list3">{{hejiObject.tyBuildingArea}}</div>
				<div class="list3">{{hejiObject.tyRentPrice}}</div>
				<div class="list3">{{hejiObject.xzsyBuildingArea}}</div>
				<div class="list3">{{hejiObject.xzsyRentPrice}}</div>
				<div class="list3">{{hejiObject.lgBuildingArea}}</div>
				<div class="list3">{{hejiObject.lgRentPrice}}</div>
				<div class="list3">{{hejiObject.fwBuildingArea}}</div>
				<div class="list3">{{hejiObject.fwRentPrice}}</div>
				<div class="list3">{{hejiObject.ckBuildingArea}}</div>
				<div class="list3">{{hejiObject.ckRentPrice}}</div>
				<div class="list3">{{hejiObject.jdscBuildingArea}}</div>
				<div class="list3">{{hejiObject.jdscRentPrice}}</div>
				<div class="list3">{{hejiObject.qtBuildingArea}}</div>
				<div class="list3">{{hejiObject.qtBuRentPrice}}</div>
				<div class="list3">{{hejiObject.allBuildingArea}}</div>
				<div class="list3">{{hejiObject.allBuRentPrice}}</div>
			</div>
		</div>
		
		

		<button style="margin: 10px auto 0;display: block;" @click="handleout">打印非住宅房屋情况调查表(二) </button>
		
		<!-- <button style="margin: 10px auto 0;display: block;" v-print="printObj">打印附加租金分析表</button>
		<div id="loading" v-show="printLoading"></div> -->
	</div>
</template>

<script>
	import * as XLSX from 'xlsx'
	import dayjs from 'dayjs'
	import {
		houseAdminList,
		addRoom,
		roomDetails,
		updRoom,
		blockList,
		blockDetail
	} from '@/api/industry'
	export default {
		props: {
			blockobj: Object
		},
		name: 'zujintiaozhengguocheng',
		data() {
			return {
				printLoading: true,
				printObj: {
					id: "publicpageview",
					popTitle: '打印预览',
					extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css",
					beforeOpenCallback(vue) {
						console.log('打开之前')
					},
					openCallback(vue) {
						console.log('执行了打印')
					},
					closeCallback(vue) {
						console.log('关闭了打印工具')
					}
				},
				list: [],
				topContet: {},
				hejiObject: {
					gyBuildingArea: 0,
					gyRentPrice: 0,
					syBuildingArea: 0,
					syRentPrice: 0,
					jryBuildingArea: 0,
					jryRentPrice: 0,
					wsBuildingArea: 0,
					wsRentPrice: 0,
					whBuildingArea: 0,
					whRentPrice: 0,
					tyBuildingArea: 0,
					tyRentPrice: 0,
					xzsyBuildingArea: 0,
					xzsyRentPrice: 0,
					lgBuildingArea: 0,
					lgRentPrice: 0,
					fwBuildingArea: 0,
					fwRentPrice: 0,
					ckBuildingArea: 0,
					ckRentPrice: 0,
					jdscBuildingArea: 0,
					jdscRentPrice: 0,
					qtBuildingArea: 0,
					qtBuRentPrice: 0,
					allBuildingArea: 0,
					allBuRentPrice: 0
				},
			}
		},
		computed: {},
		mounted() {
			console.log(this.blockobj)
			this.list = this.blockobj.notHouse4
			// this.topContet = this.blockobj.exportTou
			if (this.list) {
				this.list.forEach((item, index) => {
					this.hejiObject.gyBuildingArea = Number(this.hejiObject.gyBuildingArea) + Number(item.gyBuildingArea)
					this.hejiObject.gyRentPrice = Number(this.hejiObject.gyRentPrice) + Number(item.gyRentPrice)
					this.hejiObject.syBuildingArea = Number(this.hejiObject.syBuildingArea) + Number(item.syBuildingArea)
					this.hejiObject.syRentPrice = Number(this.hejiObject.syRentPrice) + Number(item.syRentPrice)
					this.hejiObject.jryBuildingArea = Number(this.hejiObject.jryBuildingArea) + Number(item.jryBuildingArea)
					this.hejiObject.jryRentPrice = Number(this.hejiObject.jryRentPrice) + Number(item.jryRentPrice)
					this.hejiObject.wsBuildingArea = Number(this.hejiObject.wsBuildingArea) + Number(item.wsBuildingArea)
					this.hejiObject.wsRentPrice = Number(this.hejiObject.wsRentPrice) + Number(item.wsRentPrice)
					this.hejiObject.whBuildingArea = Number(this.hejiObject.whBuildingArea) + Number(item.whBuildingArea)
					this.hejiObject.whRentPrice = Number(this.hejiObject.whRentPrice) + Number(item.whRentPrice)
					this.hejiObject.tyBuildingArea = Number(this.hejiObject.tyBuildingArea) + Number(item.tyBuildingArea)
					this.hejiObject.tyRentPrice = Number(this.hejiObject.tyRentPrice) + Number(item.tyRentPrice)
					this.hejiObject.xzsyBuildingArea = Number(this.hejiObject.xzsyBuildingArea) + Number(item.xzsyBuildingArea)
					this.hejiObject.xzsyRentPrice = Number(this.hejiObject.xzsyRentPrice) + Number(item.xzsyRentPrice)
					this.hejiObject.lgBuildingArea = Number(this.hejiObject.lgBuildingArea) + Number(item.lgBuildingArea)
					this.hejiObject.lgRentPrice = Number(this.hejiObject.lgRentPrice) + Number(item.lgRentPrice)
					this.hejiObject.fwBuildingArea = Number(this.hejiObject.fwBuildingArea) + Number(item.fwBuildingArea)
					this.hejiObject.fwRentPrice = Number(this.hejiObject.fwRentPrice) + Number(item.fwRentPrice)
					this.hejiObject.ckBuildingArea = Number(this.hejiObject.ckBuildingArea) + Number(item.ckBuildingArea)
					this.hejiObject.ckRentPrice = Number(this.hejiObject.ckRentPrice) + Number(item.ckRentPrice)
					this.hejiObject.jdscBuildingArea = Number(this.hejiObject.jdscBuildingArea) + Number(item.jdscBuildingArea)
					this.hejiObject.jdscRentPrice = Number(this.hejiObject.jdscRentPrice) + Number(item.jdscRentPrice)
					this.hejiObject.qtBuildingArea = Number(this.hejiObject.qtBuildingArea) + Number(item.qtBuildingArea)
					this.hejiObject.qtBuRentPrice = Number(this.hejiObject.qtBuRentPrice) + Number(item.qtBuRentPrice)
					this.hejiObject.allBuildingArea = Number(this.hejiObject.allBuildingArea) + Number(item.allBuildingArea)
					this.hejiObject.allBuRentPrice = Number(this.hejiObject.allBuRentPrice) + Number(item.allBuRentPrice)
				})
			}
		},

		methods: {
			handleout() {
				this.$confirm('此操作将导出该条内容，请确认是否继续操作？', '导出提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				})
				.then(() => {
					let list = this.list
					let outList = []
					this.list.forEach((item, index) => {
						outList.push({
							所号: item.blockNo,
							工业建筑面积: item.fieldName2,
							工业租金定额: item.fieldName2,
							商业建筑面积: item.fieldName2,
							商业租金定额: item.fieldName2,
							金融业建筑面积: item.fieldName2,
							金融业租金定额: item.fieldName2,
							卫生建筑面积: item.fieldName2,
							卫生租金定额: item.fieldName2,
							文化建筑面积: item.fieldName2,
							文化租金定额: item.fieldName2,
							托幼建筑面积: item.fieldName2,
							托幼租金定额: item.fieldName2,
							行政事业建筑面积: item.fieldName2,
							行政事业租金定额: item.fieldName2,
							旅馆建筑面积: item.fieldName2,
							旅馆租金定额: item.fieldName2,
							服务建筑面积: item.fieldName2,
							服务租金定额: item.fieldName2,
							仓库建筑面积: item.fieldName2,
							仓库租金定额: item.fieldName2,
							街道生产建筑面积: item.fieldName2,
							街道生产租金定额: item.fieldName2,
							其他建筑面积: item.fieldName2,
							其他租金定额: item.fieldName2,
							合计建筑面积: item.fieldName2,
							合计租金定额: item.fieldName2,
						})
						
					})
					outList.push({
						所号: '合计',
						工业建筑面积: this.hejiObject.fieldName2,
						工业租金定额: this.hejiObject.fieldName2,
						商业建筑面积: this.hejiObject.fieldName2,
						商业租金定额: this.hejiObject.fieldName2,
						金融业建筑面积: this.hejiObject.fieldName2,
						金融业租金定额: this.hejiObject.fieldName2,
						卫生建筑面积: this.hejiObject.fieldName2,
						卫生租金定额: this.hejiObject.fieldName2,
						文化建筑面积: this.hejiObject.fieldName2,
						文化租金定额: this.hejiObject.fieldName2,
						托幼建筑面积: this.hejiObject.fieldName2,
						托幼租金定额: this.hejiObject.fieldName2,
						行政事业建筑面积: this.hejiObject.fieldName2,
						行政事业租金定额: this.hejiObject.fieldName2,
						旅馆建筑面积: this.hejiObject.fieldName2,
						旅馆租金定额: this.hejiObject.fieldName2,
						服务建筑面积: this.hejiObject.fieldName2,
						服务租金定额: this.hejiObject.fieldName2,
						仓库建筑面积: this.hejiObject.fieldName2,
						仓库租金定额: this.hejiObject.fieldName2,
						街道生产建筑面积: this.hejiObject.fieldName2,
						街道生产租金定额: this.hejiObject.fieldName2,
						其他建筑面积: this.hejiObject.fieldName2,
						其他租金定额: this.hejiObject.fieldName2,
						合计建筑面积: this.hejiObject.fieldName2,
						合计租金定额: this.hejiObject.fieldName2,
					})
					// 获取表格数据
					const data = outList
					// 转换数据为工作表
					const worksheet = XLSX.utils.json_to_sheet(data)
					// 创建新的工作簿
					const workbook = XLSX.utils.book_new()
					// 将工作表添加到工作簿
					XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
					// 导出Excel文件
					XLSX.writeFile(workbook, '非住宅房屋情况调查表(二).xlsx')
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消导出'
					})
				})
			}
		},
	}
</script>

<style scoped>
	.publicpageview {
		width: 1660px;
		height: auto;
		background-color: #fff;
		margin: 20px auto;
		overflow: hidden;
		box-sizing: border-box;
		padding: 20px;
		outline: 1px solid black;
	}

	.list1 {
		width: 100px;
		box-sizing: border-box;
		height: 30px;
		line-height: 30px;
		text-align: center;
		outline: 1px solid black;
	}

	.list2 {
		height: 40px;
		line-height: 30px;
		outline: 1px solid black;
		text-align: center;
		font-size: 12px;
	}

	.left {
		width: 25px;
		height: 360px;
		outline: 1px solid black;
		line-height: 180px;
		text-align: center;
		box-sizing: border-box;
	}

	.list3 {
		width: 60px;
		height: 20px;
		line-height: 20px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
		font-size: 12px
	}

	.list4 {
		font-size: 12px;
		width: 60px;
		height: 40px;
		line-height: 40px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}
	.list8{
		font-size: 12px;
		width: 60px;
		height: 20px;
		line-height: 20px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}

	.list7 {
		font-size: 12px;
		width: 150px;
		height: 40px;
		line-height: 40px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}
	.list11{
		font-size: 12px;
		width: 100px;
		height: 20px;
		line-height: 20px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}
	.list9{
		font-size: 12px;
		width: 100px;
		height: 20px;
		line-height: 20px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}

	.list5 {
		font-size: 12px;
		width: 60px;
		height: 20px;
		line-height: 20px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}

	.list6 {
		font-size: 12px;
		width: 100%;
		height: 20px;
		line-height: 20px;
		outline: 1px solid black;
		text-align: center;
		box-sizing: border-box;
	}
</style>